<template>
	<view class="content">
		<form>
			<view class="form-input">
				<input class="uni-input" v-model="password" type="password" placeholder="请输入新的登录密码（6-20位字母加数字组合）" />
			</view>
			<view class="form-input">
				<input class="uni-input" v-model="conformPwd" type="password" placeholder="确认新登录密码" />
			</view>
			<view class="form-input" style="background: none;padding: 0;    display: flex;
    flex-direction: row;">
				<input class="uni-input" style="background-color: rgba(187, 187, 187, 0.1);border-radius: 5px;padding-left: 15px;    width: 380upx;
    margin-right: 10px;" v-model="smscode" type="number" placeholder="请输入短信验证码" />
				<button class="sms-code" :disabled="oneclick" @click="sendCode">获取短信验证码</button>
			</view>
			<button class="common-btn" @click="submit">确认修改</button>
		</form>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				password:'',
				conformPwd:'',
				smscode: '',
				oneclick:false
			}
		},
		onLoad() {

		},
		methods: {
			sendCode() {
				const formData = {
					mobile: uni.getStorageSync('riderMobile'),
				}
				this.oneclick = true
				setTimeout(() => {
					this.oneclick = false
				},1000)
				this.$http.sendmns(formData).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				})
			},
			submit() {
				if (!(this.password)) {
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return
				}
				if (!(/^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/.test(this.password))) {
					uni.showToast({
						title:'登录密码为6-20位字母数字组合',
						icon:'none'
					})
					return
				}
				if (this.password != this.conformPwd) {
					uni.showToast({
						title:'两次密码输入不一致',
						icon:'none'
					})
					return
				}
				if (!this.smscode) {
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				const formData = {
					password: this.password,
					code: this.smscode,
				}
				this.$http.setpassword(formData).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.code === 0) {
						uni.removeStorageSync("riderToken");
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/member/horseman/login'
							});
						}, 1000);
					}
				});
			},
		},
	}
</script>

<style scoped>
	.content {
		margin: 10px 4%;
		width: 100%;
	}

	.common-btn {
		width:618upx;
		height:80upx;
		
		
		background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		box-shadow: 0px 4upx 8upx 0px #FFAB71;
		border-radius:48upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		line-height: 80upx;
		margin-top: 31px;
	}
	.left{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight:bold;
	}

	/* 表单样式 */
	.form-input {
		font-size: 14px;
		position: relative;
		padding: 0 4%;
		display: flex;
		background: rgba(187, 187, 187, 0.1);
		border-radius: 5px;
		margin-top: 15px;
		line-height: 46px;
		height: 46px;
	}

	.form-input .left {
		width: 80px;
	}

	.uni-input {
		line-height: 46px;
		height: 46px;
		font-size: 14px;
		width: 100%;
	}

	.common-btn:after {
		border: 0;
	}

	.common-btn2 {
		background: none;
		box-shadow: none;
		border: solid 1px #242424;
		color: #000;
	}

	/* 注册登陆 */
	.logo {
		padding: 20px 0;
		text-align: center;
	}

	.logo uni-image,
	.logo image {
		width: 80px;
		height: 60px;
	}

	.sms-code {
		width: 260upx;
		color: #FF6001;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(187, 187, 187, 0.1);
		border-radius: 5px;
		text-align: center;
		border: none;

	}
	.form-input button::after{
		border: none !important;
	}
</style>
